<!DOCTYPE html>

<html>



<head>

	<meta charset="utf-8">

	<title></title>
	<meta name="renderer" content="webkit">

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<meta name="viewport"

		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<link rel="stylesheet" href="/public/static/layuiadmin/layui/css/layui.css" media="all">

	<link rel="stylesheet" href="/public/static/layuiadmin/style/admin.css" media="all">

</head>



<body>

	<div class="layui-fluid">

		<div class="layui-row layui-col-space15">

			<div class="layui-col-md12">

				<div class="layui-card">

					<div class="layui-card-body">

						<table class="layui-hide" id="test-table-reload" lay-filter="user"></table>

					</div>
				</div>

			</div>

		</div>

	</div>

	<script type="text/html" id="toolbar">

		<a class="layui-btn layui-btn-sm  layuiadmin-btn-list" data-type="add"><i class="layui-icon">&#xe608;</i>添加</a>

		<a class="layui-btn layui-btn-danger layui-btn-sm  layuiadmin-btn-list" data-type="batchdel"><i class="layui-icon">&#xe640;</i>删除</a>

	</script>

	<script type="text/html" id="operateTpl">

		<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>

		<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>

	</script>

	<script type="text/html" id="classTpl">

		<input type="checkbox" name="is_class" value="{{d.id}}" lay-skin="switch" lay-text="有|没有" lay-filter="classDemo" {{ d.is_class == 2 ? 'checked' : '' }}>

	</script>

	<script type="text/html" id="showTpl">

		<input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="显示|不显示" lay-filter="showDemo" {{ d.show == 1 ? 'checked' : '' }}>

	</script>

	<script type="text/html" id="statusTpl">

		<input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="正常|停用" lay-filter="statusDemo" {{ d.status == 1 ? 'checked' : '' }}>

	</script>

	<script src="/public/static/layuiadmin/layui/layui.js"></script>

	<script>

		layui.config({

			base: '/public/static/layuiadmin/' // 静态资源所在路径

		}).extend({

			index: 'lib/index', // 主入口模块

			treetable: 'treetable',

			api: 'api'

		}).use(['index', 'table', 'treetable', 'api', 'form'], function () {

			var $ = layui.jquery;

			var table = layui.table;

			var layer = layui.layer;

			var treetable = layui.treetable;

			var api = layui.api;

			var form = layui.form;



			var _table = {

				reloads: function () {

					renderTable();

				}

			}

			window.tables = _table;



			// 渲染表格

			var renderTable = function () {

				layer.load(2);

				treetable.render({

					treeColIndex: 2, // 树形图标显示在第几列

					treeSpid: 0, // 最上级的父级id

					treeIdName: 'id', // id字段的名称

					treePidName: 'parent_id', // pid字段的名称

					treeDefaultClose: true, // 是否默认折叠

					treeLinkage: false, // 父级展开时是否自动展开所有子级

					elem: '#test-table-reload',

					url: '{:url("Module/getModule")}',

					toolbar: '#toolbar',

					cols: [

						[{

							checkbox: true

						}, {

							field: 'id',

							title: 'ID',

							align: 'center',

							width: 60

						}, {

							field: 'title',

							title: '模块名称'

						}, {

							field: 'path',

							title: '后台路径',

							edit: 'text',

							align: 'center',

							width: 150

						}, {

							field: 'icon',

							title: '图标',

							edit: 'text',

							align: 'center',

							width: 150

						}, {

							field: 'orders',

							width: 90,

							align: 'center',

							edit: 'text',

							title: '排序号'

						}, {

							field: 'show',

							title: '是否显示',

							width: 100,

							align: 'center',

							templet: '#showTpl'

						}, {

							field: 'status',

							title: '状态',

							width: 100,

							align: 'center',

							templet: '#statusTpl'

						}, {

							field: 'create_time',

							title: '创建时间',

							align: 'center',

							width: 170

						}, {

							title: '操作',

							width: 135,

							align: 'center',

							templet: '#operateTpl'

						}]

					],

					page: true,

					height: 'full-100',

					limit: 30,

					limits: [30, 50, 100, 150, 200, 300, 500],

					done: function () {

						layer.closeAll('loading');

					}

				});

			};

			// 方法级渲染

			var $ = layui.$,

				active = {

					batchdel: function () {

						var checkStatus = table.checkStatus('test-table-reload'),

							checkData = checkStatus.data; // 得到选中的数据

						if (checkData.length === 0) {

							return layer.msg('请选择要删除的数据', {

								icon: 0,

								shade: [0.5, '#393D49']

							});

						}

						layer.confirm('确定删除吗？', function (index) {

							var dats = {

								ids: []

							};

							for (var k in checkData) {

								dats.ids.push(checkData[k].id);

							}

							layer.msg('删除中', { icon: 16, shade: 0.01 });

							api.ajax('{:url("Module/delete")}', 'post', 'json', dats, function (res) {

								layer.closeAll('loading');

								layer.msg(res.msg)

							});

							renderTable();

						});

					},

					add: function () {

						layer.open({

							type: 2,

							title: '编辑',

							content: '{:url("Module/add")}',

							maxmin: true,

							area: ['550px', '700px'],

							yes: function (index, layero) {

								// 点击确认触发 iframe 内容中的按钮提交

								var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");

								submit.click();

							}

						});

					}

				};

			// 监听单元格编辑

			table.on('edit(user)', function (obj) {

				var value = obj.value, // 得到修改后的值

					data = obj.data, // 得到所在行所有键值

					field = obj.field; // 得到字段

				var dats = {};

				dats['id'] = data.id;

				dats[field] = value

				api.ajax('{:url("Module/inputChange")}', 'post', 'json', dats, function (res) {

					layer.msg(res.msg)

				});

			});

			// 监听性别操作

			form.on('switch(showDemo)', function (obj) {

				var dats = {}, val = 1;

				dats['id'] = this.value;

				if (!obj.elem.checked) {

					val = 2

				}

				dats[this.name] = val;

				layer.msg('加载中', { icon: 16, shade: 0.01 });

				api.ajax('{:url("Module/inputChange")}', 'post', 'json', dats, function (res) {

					layer.closeAll('loading');

					layer.msg(res.msg)

				});

			});

			// 监听性别操作

			form.on('switch(classDemo)', function (obj) {

				var dats = {}, val = 1;

				dats['id'] = this.value;

				if (obj.elem.checked) {

					val = 2

				}

				dats[this.name] = val;

				layer.msg('加载中', { icon: 16, shade: 0.01 });

				api.ajax('{:url("Module/inputChange")}', 'post', 'json', dats, function (res) {

					layer.closeAll('loading');

					layer.msg(res.msg)

				});

			});

			// 监听工具条 

			table.on('tool(user)', function (obj) { // 注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"

				var data = obj.data; // 获得当前行数据

				var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

				var tr = obj.tr; // 获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'detail') { // 查看

					// do somehing

				} else if (layEvent === 'del') { // 删除

					layer.confirm('确定要删除么', function (index) {

						var dats = {

							ids: [data.id]

						};

						layer.msg('加载中', { icon: 16, shade: 0.01 });

						api.ajax('{:url("Module/delete")}', 'post', 'json', dats, function (res) {

							layer.closeAll('loading');

							layer.msg(res.msg);

							obj.del(); // 删除对应行（tr）的DOM结构，并更新缓存

							layer.close(index);	// 向服务端发送删除指令

							renderTable();

						});

					});

				} else if (layEvent === 'edit') { // 编辑

					layer.open({

						type: 2,

						title: '编辑',

						content: '{:url("Module/edit")}?id=' + data.id,

						maxmin: true,

						area: ['550px', '700px'],

						yes: function (index, layero) {

							// 点击确认触发 iframe 内容中的按钮提交

							var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");

							submit.click();

						}

					});

				} else if (layEvent === 'LAYTABLE_TIPS') {

					layer.alert('Hi，头部工具栏扩展的右侧图标。');

				}

			});

			$('.layui-card').on('click', '.layuiadmin-btn-list', function () {

				var type = $(this).data('type');

				active[type] ? active[type].call(this) : '';

			});

			renderTable();

		});

	</script>

</body>



</html>